<script setup>
import {projectProgress} from '@/api/project'
import {computed, reactive, ref} from "vue";
import CalendarItem from './com/calendar.vue'
import {delay, patchZero,} from "@/utils";
import {patchCalendar} from './util'
import {Search, Refresh} from "@element-plus/icons-vue";
import {toast} from "@/hook/toast";
import WaterFull from "@/views/project-progress/com/water-full.vue";


const reqPayload = reactive({
  startDate: '',
  endDate: '',
  keyword: '',
  dataRange: []
})
const loading = ref(false)
const calendarList = ref([])
const projectList = ref([])


function f(date) {
  const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
  return `${year}-${patchZero(month)}-${patchZero(day)}`
}

function initDate() {
  const date = new Date()
  const [year, month] = [date.getFullYear(), date.getMonth()]
  const startDate = f(new Date(year, month))
  const endDate = f(new Date(new Date(year, month + 1).getTime() - 1))
  reqPayload.dataRange = [startDate, endDate]
  calendarList.value = patchCalendar(startDate, endDate)
  loading.value = false
  console.log(calendarList.value)
}

initDate()
getData()

async function getData() {
  if (loading.value) return
  loading.value = true
  const {dataRange, keyword} = reqPayload
  const [start, end] = dataRange
  const resp = await projectProgress({
    keyword: keyword,
    start_date: start,
    end_date: end,
  })
  if (!resp.data || !resp.data.length) {
    resp.data = []
    toast({title: '暂无数据', type: "error"})
  }
  const {data} = resp
  projectList.value = data
  await delay(300)
  loading.value = false
}

function dateChange() {
  const [start, end] = reqPayload.dataRange
  calendarList.value = patchCalendar(start, end)
  getData()
}

const defaultOpt = computed(() => JSON.stringify(calendarList.value))

const formRef = ref(null)

function resetHandle() {
  formRef.value.resetFields()
  getData()
}
function handleRefresh() {
  getData()
}

</script>

<template>
  <div class="full project-progress-wrap flex column"
       v-loading="loading"
  >
    <div class="form-wrapper">
      <el-form inline label-position="left"
               label-width="75px"
               ref="formRef"
               :model="reqPayload"
      >
        <el-form-item label="项目名称" prop="keyword">
          <el-input placeholder="请输入项目名称进行检索" v-model="reqPayload.keyword"/>
        </el-form-item>
        <el-form-item label="日期" prop="dataRange">
          <el-date-picker
              v-model="reqPayload.dataRange"
              type="daterange"
              unlink-panels
              range-separator="到"
              @change="dateChange"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button :icon="Search" type="primary" @click="getData">搜索</el-button>
            <el-button type="danger" @click="resetHandle">重置</el-button>
            <el-button :icon="Refresh" type="success" @click="handleRefresh">刷新</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
    <div class="relative flex-1 w-100 mt-24">
      <div class="absolute inset">
        <el-scrollbar>
          <water-full :list="projectList">
            <template #default="{record}">
              <calendar-item
                  :option="defaultOpt"
                  :list="record"
              />
            </template>
          </water-full>
        </el-scrollbar>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.project-progress-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;

  .form-wrapper {
    padding: 12px 12px 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 2px 6px 0 rgba(0, 0, 0, .045);
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
  }

  .calendar-list {
    //display: grid;
    //grid-template-columns: repeat(2, 1fr);
    //gap: 24px;
    //align-items: start;
    //align-content: start;
    //justify-self: start;
    //justify-content: start;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 24px;
    align-content: flex-start;
    justify-content: flex-start;

    .item-cal {
      width: calc(50% - 12px);
      height: fit-content;
    }
  }
}
</style>
